{include file='public/header' /}
<!-- 正文开始 -->
<style type="text/css">
   /* .layui-table-cell {
        height: 80px;
        line-height: 80px;
    }*/
    th .layui-table-cell {
        height: 30px;
        line-height: 30px;
    }
    th .laytable-cell-1-0-7 {
        height: 30px;
        line-height: 30px;
    }
    .layui-table img {
        width: 100px;
        height: 60px;
    }
</style>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <div class="layui-form toolbar">
                <blockquote class="layui-elem-quote layui-quote-nm">
                    订单状态：
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">全部<span class="layui-badge layui-bg-gray">1</span></button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">待支付<span class="layui-badge layui-bg-orange">1</span></button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">已支付,待发货<span class="layui-badge">1</span></button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">待收货<span class="layui-badge layui-bg-gray">1</span></button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">已完成<span class="layui-badge layui-bg-gray">1</span></button>


                    <br><br>订单类型：
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">全部<span class="layui-badge layui-bg-gray">1</span></button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">线上订单<span class="layui-badge layui-bg-orange">1</span></button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">线下订单<span class="layui-badge layui-bg-gray">1</span></button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">秒杀订单<span class="layui-badge layui-bg-gray">1</span></button>
                    <!--<button type="button" class="layui-btn layui-btn-primary layui-btn-sm">砍价订单<span class="layui-badge layui-bg-gray">1</span></button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">积分订单<span class="layui-badge layui-bg-gray">1</span></button>
-->

                    <br><br>支付方式：
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">全部<span class="layui-badge layui-bg-gray">1</span></button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">微信支付<span class="layui-badge layui-bg-gray">1</span></button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">支付宝支付<span class="layui-badge layui-bg-gray">1</span></button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">余额支付<span class="layui-badge layui-bg-gray">1</span></button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">线下支付<span class="layui-badge layui-bg-gray">1</span></button>

                    <br><br>创建时间：
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">全部</button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">今天</button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">昨天</button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">最近一星期</button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">本月</button>
                    <button type="button" class="layui-btn layui-btn-primary layui-btn-sm">自&nbsp;定&nbsp;义</button>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input" id="test10" placeholder="&nbsp;&nbsp;&nbsp;  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;选择时间  ">
                    </div>


                </blockquote>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">订&nbsp;&nbsp;单&nbsp;&nbsp;号：</label>
                        <div class="layui-input-inline">
                            <input name="goods_no" value="" class="layui-input" type="text" placeholder="输入订单号"/>
                        </div>
                    </div>

                    <div class="layui-inline" style="padding-left: 20px;">
                        <button class="layui-btn icon-btn " lay-filter="formSubSearchTbAdv" lay-submit>
                            <i class="layui-icon">&#xe615;</i>搜索
                        </button>

                    </div>
                </div>
            </div>

           <!-- <table id="tableUser" lay-filter="tableUser"></table>-->

            <!--表格tab-->
            <div class="layui-tab layui-tab-brief" lay-filter="tableXTab">
                <ul class="layui-tab-title">
                    <li class="layui-this">线下订单</li>
                   <!-- <li>合并单元格</li>-->
                    <li>线上订单</li>
                </ul>
                <div class="layui-tab-content" style="padding-left: 0;padding-right: 0;">

                    <div class="layui-tab-item layui-show">

                        <table id="xTable1" lay-filter="xTable1"></table>
                    </div>
                   <!-- <div class="layui-tab-item ">
                        <table id="xTable2" lay-filter="xTable2"></table>
                    </div>-->
                    <div class="layui-tab-item">

                        <table id="xTable3" lay-filter="xTable3"></table>
                    </div>
                </div>

                </div>
            </div>
        </div>




        </div>





<!-- 表格操作列 -->
<script type="text/html" id="options">

    <a class="layui-btn layui-btn-sm layui-btn-xs {:auth('mall.item_order/get_edit')}" lay-event="edit">订单详情</a>

</script>

<script type="text/html" id="category">
    {{#  if(d.Goods){ }}
    {{d.Goods.title}}
    {{#  } else { }}
    商品不存在
    {{#  } }}
</script>
<script type="text/html" id="user">
    {{#  if(d.User){ }}
    {{d.User.nick_name}}
    {{#  } else { }}
    会员不存在
    {{#  } }}
</script>
<script type="text/html" id="phone">
    {{#  if(d.User){ }}
    {{d.User.phone}}
    {{#  } else { }}
    手机号不存在
    {{#  } }}
</script>
<!-- 表单弹窗 -->


<!-- js部分 -->
{include file='public/footer' /}

<script>
    layui.use(['layer', 'table', 'admin','form','tableX'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var admin = layui.admin;
        var table = layui.table;
       // var tableX = layui.tableX;
        //线下商品
        var insTb1 =
                table.render({
                    elem: '#xTable1'
                    , autoSort: false
                    , url: "{:__url('mall.item_order/getData')}" //数据接口
                    ,where:{
                        type:1
                    }
                    , page: true //开启分页
                    ,  cols: [[
                         {field: 'order_sn', title: '订单编号', sort: true, width: 180}
                        , {field: 'user', title: '用户呢称', toolbar: '#user'}
                        , {field: 'phone', title: '用户手机号', toolbar: '#phone'}
                        , {field: 'amount', title: '金额', sort: true, width: 80}
                        ,{
                            title: '状态', templet: function (d) {
                                var strs = ['<span class="layui-badge layui-bg-blue">待支付</span>',
                                    '<span class="layui-badge layui-bg-green">已支付/待消费</span>',
                                    '<span class="layui-badge layui-bg-green">已预约</span>',
                                    '<span class="layui-badge layui-bg-green">已核销</span>',
                                    '<span class="layui-badge layui-bg-red">售后</span>',
                                    '<span class="layui-badge layui-bg-orange">已评价</span>',
                                    '<span class="layui-badge layui-bg-orange">已领取</span>',
                                    '<span class="layui-badge layui-bg-red">订单失效</span>',
                                ];
                                return strs[d.status];
                            }, align: 'center',width: 150
                        }
                        , {field: 'create_time', title: '创建时间'}
                        , {fixed: 'right', align: 'center', title:'操作', toolbar: '#options',width: 180}
                    ]]
                });
        // 线下商品
        var insTb3 = table.render({
            elem: '#xTable3',
            url: "{:__url('mall.item_order/getData')}",
            where:{
                type:2
            },
            page: true,
             cols: [[
            {field: 'order_sn', title: '订单编号', sort: true, width: 180}
            , {field: 'user', title: '用户呢称', toolbar: '#user'}
            , {field: 'phone', title: '用户手机号', toolbar: '#phone'}
            , {field: 'amount', title: '金额', sort: true, width: 80}
            ,{
                title: '状态', templet: function (d) {
                    var strs = ['<span class="layui-badge layui-bg-blue">待支付</span>',
                        '<span class="layui-badge layui-bg-green">已支付</span>',
                        '<span class="layui-badge layui-bg-green">已发货</span>',
                        '<span class="layui-badge layui-bg-red">申请售后</span>',
                        '<span class="layui-badge layui-bg-orange">已评价</span>',
                        '<span class="layui-badge layui-bg-orange">已领取</span>',
                        '<span class="layui-badge layui-bg-red">订单失效</span>',
                    ];
                    return strs[d.status];
                }, align: 'center',width: 150
            }
            , {field: 'create_time', title: '创建时间'}
            , {fixed: 'right', align: 'center', title:'操作', toolbar: '#options',width: 180}
        ]]
        });

        //监听行单击事件（双击事件为：rowDouble）
        table.on('row(xTable3)', function(obj){
            var data = obj.data;

           /* layer.alert(JSON.stringify(data), {
                title: '当前行数据：'
            });*/

            //标注选中样式
            obj.tr.addClass('layui-table-click').siblings().removeClass('layui-table-click');
        });

        //监听工具条
        table.on('tool(xTable1)', function (obj) { //注：tool是工具条事件名，dataTable是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                    , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'edit') {
 
                showEditModel('查看订单'+data.order_sn,'/mall.item_order/get_edit?id='+ data.id );

            }
        });

        //监听工具条
        table.on('tool(xTable3)', function (obj) { //注：tool是工具条事件名，dataTable是table原始容器的属性 lay-filter="对应的值"
            var data = obj.data //获得当前行数据
                    , layEvent = obj.event; //获得 lay-event 对应的值
            if (layEvent === 'edit') {

                showEditModel('查看订单'+data.order_sn,'/mall.item_order/get_edit?id='+ data.id );

            }
        });
        //按钮批量删除
        $("#listDelete").click(function () {
            var ids = [];
            var hasCheck = table.checkStatus('dataTable');
            var hasCheckData = hasCheck.data;
            if (hasCheckData.length > 0) {
                $.each(hasCheckData, function (index, element) {
                    ids.push(element.id)
                })
            }
            if (ids.length > 0) {
                layer.confirm('确认删除吗？', function (index) {
                    layer.close(index);
                    var load = layer.load();
                    $.post("{{ route('mall.order.delete') }}", {
                        _method: 'delete',
                        ids: ids
                    }, function (res) {
                        layer.close(load);
                        if (res.code == 0) {
                            layer.msg(res.msg, {icon: 1}, function () {
                                dataTable.reload({page: {curr: 1}});

                            })
                        } else {
                            layer.msg(res.msg, {icon: 2})
                        }
                    });
                });
            } else {
                layer.msg('请选择删除项', {icon: 2})
            }
        })

        // 显示表单弹窗
        function showEditModel(title,url) {
            layer.full(admin.open({
                type: 2,
                //offset:'r',
                title: title,
                content: url,
                btn: ['确定', '关闭'],
                //area: ['500px', '100%'],
                btnAlign: 'c',   // 按钮居中
                success: function (layero, dIndex) {
                    form.render();    // 表单渲染
                },
                yes: function (index, layero) {
                    layer.close(index);

                },
                btn2: function (index, layero) {
                    layer.close(index);
                }


            }));
        }

        // 搜索
        form.on('submit(formSubSearchTbAdv)', function (data) {
            insTb1.reload({where: data.field,page: {
                curr: 1
            }}, 'data');
            //insTb2.reload({where: data.field}, 'data');
            insTb3.reload({where: data.field,page: {
                curr: 1
            }}, 'data');
        });


    })
</script>

</body>
</html>
